<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .header {
            width: 100%;
            height: 60px;
            background-color: #f0f0f0;
            border-bottom: 2px solid #ccc;
        }

        .header .btn-toggle {
            float: right;
            padding: 10px 30px;
            height: 20px;
            line-height: 20px;
            background-color: skyblue;
            margin: 10px 150px 10px 0;
            cursor: pointer;
            color: #fff;
        }

        .header .code {
            /* 隐藏二维码 */
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            border: 2px solid #ccc;
            border-top: 0;
            z-index: 1000;
            background-color: #fff;
            padding: 20px 20px 20px 20px;
        }

        .header .code .btn-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #ccc;
            cursor: pointer;
        }

        body {
            user-select: none;
        }
    </style>
    </style>
</head>

<body>
    <div class="header">
        <div class="btn btn-toggle"> 切换 </div>

        <div class="code">
            <span class="btn btn-close">×</span>
            <img src="./code.png" alt="">
        </div>

    </div>
    <script>
        var Page = function () {
            this.header = document.querySelector(".header");
            this.code = document.querySelector(".code");
            this.flag = true;
        }

        Page.prototype.toggle = function () {
            var _self = this;
            this.header.onclick = function (event) {
                var ele = event.target;
                // console.log(ele);
                var cName = ele.className;
                if (cName.indexOf("btn-toggle") > -1) {
                    if (_self.flag) {
                        _self.code.style["display"] = "block";
                        _self.flag = false;
                    }

                    else {
                        _self.code.style["display"] = "none";
                        _self.flag = true;
                    }
                }

                if (cName.indexOf("btn-close") > -1) {
                    _self.close();
                }
            }
        }

        Page.prototype.close = function () {
            this.code.style["display"] = "none";
            this.flag = true;
        }

        Page.prototype.init = function () {
            this.toggle();
        }

        new Page().init();
    </script>
</body>

</html>